<template lang="html">
	<div class="vue-list" @scroll="handleScroll" ref='myScroll'>
		<ul :style="{paddingTop: lineTopHeight +'px',paddingBottom: lineBottomHeight +'px'}" ref='mainScroll'>
			<li v-for="item in previewList">
				<img src="static/image/home/person_1.png" style='width: 3.5em;height: 3.5em;margin-right: 1em;' />
				<div style='text-align: left;flex-grow: 1;'>
					<h3 style='display: flex;justify-content: space-between;'>
						<div>关于下一步发展</div>
						<div style='color: #BBBEC4;'>12:22</div>
					</h3>
					<div style='color: #BBBEC4'>由于存在纠纷和思考和方法和数据库</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'vue-list',
		props: {
			list: {
				type: Array,
				required: true,
				default: [],
				twoWays: true
			},
			height: {
				type: Number,
				default: 59
			},
			userName: {
				type: String,
				default: ''
			},
			canScroll: {
				type: Boolean,
				default: true
			},
			dispatchData: {
				type: Function
			}
		},
		data() {
			return {
				lastScrollTop: null,
				distance: 59,
				lineTopHeight: 0,
				lineBottomHeight: 0,
				canLoadmore: true,
				previewList: [],
				displayCount: 0,
				offset: 0
			}
		},
		mounted() {
			this.initData();
			this.handleScroll();
			console.log(this.previewList)
		},
		methods: {
			initData() {
				// init all data
				this._rowsInWindow = Math.ceil(this.$el.offsetHeight / this.height),
					this._above = this._rowsInWindow * 2,
					this._below = this._rowsInWindow,
					this._max = this._rowsInWindow * this.height;
			},
			handleScroll() {
				this.$emit('setFalse')
				let _scrollTop = this.$el.scrollTop,
					_height = this.$el.querySelectorAll('ul')[0].offsetHeight,
					_contentHeight = this.$el.offsetHeight;

				// Counts the number of rows on the current screen
				if(_scrollTop / this.height - Math.floor(_scrollTop / this.height) > 0.5) {
					this.displayCount = Math.ceil(_scrollTop / this.height);
				} else {
					this.displayCount = Math.floor(_scrollTop / this.height);
				}

				// if the maximum height is exceeded, reset the previewList
				if(this.lastScrollTop === null || Math.abs(_scrollTop - this.lastScrollTop) > this._max) {
					this.lastScrollTop = _scrollTop;
				} else {
					return;
				}

				// get from and to count
				let _from = parseInt(_scrollTop / this.height) - this._above;
				if(_from < 0) {
					_from = 0;
				}
				let _to = _from + this._above + this._below + this._rowsInWindow;
				if(_to > this.list.length) {
					_to = this.list.length;
				}
				this.from = _from;
				this.to = _to;

				// set top height and bottom height
				this.lineTopHeight = _from * this.height;
				this.lineBottomHeight = (this.list.length - _to) * this.height;

				// dispatch data
				if(typeof this.dispatchData === 'function') {
					this.dispatchData(this)
				}

				this.resetPreviewList(_from, _to);
			},
			resetPreviewList(from, to) {
				// reset previewList
				this.previewList = [];
				for(; from < to; from++) {
					this.previewList.push(this.list[from])
				}
			}
		},
		components: {}
	}
</script>

<style lang="less" scoped>
	.vue-list {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		&::scroll-bar {
			width: 0;
		}
		ul {
			width: 100%;
			margin: 0;
			padding: 0;
			li {
				padding: 10px 5%;
				border-bottom: 1px solid #efefef;
				align-items: center;
				display: flex;
				justify-content: space-between;
				text-decoration: none;
				font-size: 14px;
				text-align: left;
				box-sizing: border-box;
				background: #fff;
				&.line-top,
				&.line-bottom {
					border-bottom: 0;
				}
				img {
					width: 0.4rem;
					height: 0.4rem;
				}
				p {
					padding-left: 0.1rem;
				}
			}
		}
		.load-more-gif {
			width: 100%;
			height: 59px;
			text-align: center;
			line-height: 59px;
			background: #fff;
			border-top: none;
			color: #48B884;
		}
	}
	
	.checked:after {
		color: limegreen;
		content: "\2714";
	}
</style>